
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录|注册</title>
  <link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    *{ margin: 0;
      padding: 0;
      box-sizing:border-box;
    }
    html, body, main{
      height: 100%;
    }
    body {
      font: 14px/1.5 Arial;
    }
    a {
      text-decoration: none;
      color: #444;
    }



    main {
      background-image: url(http://p1.music.126.net/uqVB0u2spm_t0OUAdvXbCQ==/18493785580103375.jpg), url(1.jpg);
      background-position: center center;
      background-repeat: no-repeat, no-repeat;
      background-size: cover;
    }
    
    /*头部*/
    header {
      position: absolute;
      top: 10px;
      width: 100%;
    }
    header .login {
      float: right;
      margin-right: 20px;
      font-size: 16px;
      color: #a79a9e;
    }
     header a.login i{
      margin-right: 5px;
    }

    

    .flip-modal{
      display: none;
    }
    .show{
      display: block!important;
    }
    
    /*登录框*/
    .modal {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 400px;
      padding: 16px;
      background-color: rgba(40,40,40,0.5);
      box-shadow: 0px 0px 0 2px rgba(0,27,4,0.2);
    }

    .modal .close {
      position: absolute;
      right: 10px;
      top: 10px;
      color: #fff;
    }
    /*居中*/
    .modal .tabs {
      text-align: center;
    }
    .modal .tabs a {
      display: inline-block;
      font-size: 16px;
      margin: 0 10px;
      color: #fff;
    }
    /*点击的下划线*/
    .modal .tabs a.active {
      border-bottom: 2px solid #fff;
      color: #fff;
    }
    /*设置容器大小*/
    .modal .content {
      padding: 20px 40px;
    }
    /*设置里面的字体大小和颜色*/
    .modal .errormsg {
      color: #ff9800;
      font-size: 12px;
    }
    /*div定位做字体图标的坐标*/
    .modal .content .input-field {
      position: relative;
      margin-top: 10px;
    }
    /*字体图标定位*/
    .modal .content .input-field .fa{
      position: absolute;
      left: 13px;
      top: 13px;
    }
    /*设置登录和密码,居中,占满剩余长度*/
    .modal .content input[type=text],
    .modal .content input[type=password] {
      width: 100%;
      padding: 10px 10px 10px 28px;
      outline: none;
    }

    /*提交按钮*/
    .modal .content input[type=submit] {
      padding: 6px 10px;
      border: none;
      
      box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
      outline: none;
    }

    /*重难点过度动画*/
    .flip-modal.login .modal-login,
    .flip-modal.register .modal-register {
      transform: translate(-50%,-50%) rotateY(0deg);
      backface-visibility: hidden;
      transition: all 1s;
    }
    .flip-modal.login .modal-register,
    .flip-modal.register .modal-login{
      transform: translate(-50%,-50%) rotateY(180deg);
      backface-visibility: hidden;
      transition: all 1s;
    }


  </style>

</head>
<body>
  <header>
    <a class="login" href="#"><i class="fa fa-user-circle"></i>登录</a>
  </header>
  <main>
   
    <div class="flip-modal login">

       <!-- 登录 -->
      <div class="modal modal-login">
       <a class="close" href="#"><i class="fa fa-close"></i></a>
       <!-- 头部点击注册登录 -->
       <div class="tabs">
         <a class="login active" href="#">登录</a>
         <a class="register" href="#">注册</a>
       </div>

       <div class="content">
        <div class="errormsg"></div>
        <form action="/login" method="post">
          <div class="input-field">
            <i class="fa fa-user-o"></i>
            <input name="username" type="text" placeholder="用户名">
          </div>
          <div class="input-field">
            <i class="fa fa-lock"></i>
            <input name="password" type="password" placeholder="密码">
          </div>   
          <div class="input-field">
            <input type="submit" value="登录">
          </div>            
        </form>
       </div>
      </div>

      <!-- 注册 -->
      <div class="modal modal-register">
         <a class="close fa fa-close" href="#"></a>
         <div class="tabs">
           <a class="login" href="#">登录</a>
           <a class="register active" href="#">注册</a>
         </div>
         <div class="content">
          <div class="errormsg"></div>
          <form action="/register" method="post">
            <div class="input-field">
              <i class="fa fa-user-o"></i>
              <input name="username" type="text" placeholder="输入用户名">
            </div>
            <div class="input-field">
              <i class="fa fa-lock"></i>
              <input name="password" type="password" placeholder="输入密码">
            </div>
            <div class="input-field">
              <i class="fa fa-lock"></i>
              <input name="password2" type="password" placeholder="再次输入密码">
            </div> 
             <div class="input-field">
               <input type="submit" value="注册">
             </div>
          </form>            
         </div>          
      </div> 

    </div>

  </main>

  <script>
    
    function $(selector){
      return document.querySelector(selector)
    }
    function $$(selector){
      return document.querySelectorAll(selector)
    }


    $$('.modal .login').forEach(function(node){
      node.onclick = function(){
        $('.flip-modal').classList.remove('register')
        $('.flip-modal').classList.add('login')
      }      
    })
    $$('.modal .register').forEach(function(node){
      node.onclick = function(){
        $('.flip-modal').classList.remove('login')
        $('.flip-modal').classList.add('register')
      }      
    })
    $(".close").onclick = function(){
      $('.flip-modal').classList.remove('show')
    }

    $(".flip-modal").onclick=function(e){
        e.stopPropagation()
    }
    
    $('header .login').onclick = function(e){
      e.stopPropagation()
      $('.flip-modal').classList.add('show')
    }

    
    

    document.onclick = function(){
      $('.flip-modal').classList.remove('show')
    }


    $('.modal-login form').addEventListener('submit', function(e){
      e.preventDefault()
      if(!/^\w{3,8}$/.test($('.modal-login input[name=username]').value)){
        $('.modal-login .errormsg').innerText = '用户名需输入3-8个字符，包括字母数字下划线'
        return false
      }
      if(!/^\w{6,10}$/.test($('.modal-login input[name=password]').value)){
        $('.modal-login .errormsg').innerText = '密码需输入6-10个字符，包括字母数字下划线'
        return false
      }
      this.submit()      
    })

    $('.modal-register form').addEventListener('submit', function(e){
      e.preventDefault()
      if(!/^\w{3,8}$/.test($('.modal-register input[name=username]').value)){
        $('.modal-register .errormsg').innerText = '用户名需输入3-8个字符，包括字母数字下划线'
        return false
      }
      if(/^hunger$|^ruoyu$/.test($('.modal-register input[name=username]').value)){
        $('.modal-register .errormsg').innerText = '用户名已存在'
        return false
      }
      if(!/^\w{6,10}$/.test($('.modal-register input[name=password]').value)){
        $('.modal-register .errormsg').innerText = '密码需输入6-10个字符，包括字母数字下划线'
        return false
      }
      if($('.modal-register input[name=password]').value !== $('.modal-register input[name=password2]').value){
        $('.modal-register .errormsg').innerText = '两次输入的密码不一致'
        return false
      }
      this.submit()      
    })


  </script>

</body>
</html>